<!-- 头部 -->
<template>
  <div class="header">
    <!-- 前段 -->
    <div class="forepart-content">
      <el-button plain
                 icon="el-icon-menu"
                 size="mini"
                 @click="collapseMenu"></el-button>
      <h3 style="color: #fff;height:42px;overflow: hidden;">
        <common-breadcrumb />
      </h3>
    </div>
    <!-- 后段 -->
    <div class="backEnd-content">
      <el-dropdown trigger="hover"
                   size="mini">
        <div class="el-dropdown-link">
          <img :src="imgUrl"
               alt="头像"
               class="user" />
          <span style="margin-left: 5px;">{{JSON.parse($store.state.userName)[0].userName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <!-- <el-dropdown-item @click="personVisible=true , personTitle='个人中心'">个人中心</el-dropdown-item> -->
            <el-dropdown-item @click="changePasswordModal=true, dialogFormTitle='修改密码' ,username=JSON.parse($store.state.userName)[0].userName">修改密码</el-dropdown-item>
            <el-dropdown-item @click="signout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>

    <!-- <personel-center :personVisible="personVisible"
                     @dialog="dialog"></personel-center> -->

    <change-password :dialogVisible="changePasswordModal"
                     :dialogFormTitle="changePasswordTitle"
                     :rowFrom="username"
                     @dialog="dialog"> </change-password>
  </div>
</template>

<script>
import CommonBreadcrumb from '../CommonBreadcrumb.vue'
// import PersonelCenter from './PersonelCenter.vue'
import changePassword from './ChangePassword.vue'
export default {
  components: {
    CommonBreadcrumb, changePassword
  },
  data () {
    return {
      headPortraits: ['Icon1.svg', 'Icon2.svg', 'Icon3.svg', 'Icon4.svg', '小刘鸭1.jpg', '小刘鸭2.jpg', '小刘鸭3.jpg', '小刘鸭4.jpg', '小刘鸭5.jpg', '小刘鸭6.jpg', '小刘鸭7.jpg', '小刘鸭8.jpg', '小刘鸭9.jpg', '小刘鸭10.jpg', '小刘鸭11.jpg', '小刘鸭12.jpg', '小刘鸭13.jpg', '小刘鸭14.jpg', '小刘鸭15.jpg'], /* 头像 */
      personVisible: false, /* 个人中心弹出框（显示/隐藏） */
      // personTitle: '',
      changePasswordModal: false, /* 修改密码（显示/隐藏） */
      changePasswordTitle: '',
      username: ''
    }
  },
  computed: {
    /* 随机获取头像 */
    imgUrl: function () {
      return require('../../assets/images/Avatar_images/' + this.headPortraits[Math.floor(Math.random() * this.headPortraits.length)])
    }
  },
  methods: {
    // 控制左侧菜单是否折叠
    collapseMenu () {
      this.$store.commit('collapseMenu')
    },
    // 退出
    signout () {
      this.$confirm('是否注销账号?', '提示', {
        confirmButtonText: '注销',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        localStorage.clear()
        this.$message.warning('您已退出登陆！')
        this.$router.push('/login')
      }).catch(() => { })
    },
    /* 接收弹框（子组件）传过来的数据 */
    dialog (valOne) { this.changePasswordModal = valOne }
  }
}
</script>

<style lang="less" scoped>
.header {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: space-between;
}
/* 前段样式 */
.forepart-content {
  display: flex;
  align-items: center;
  .el-button {
    margin-right: 20px;
  }
}
/* 后段样式 */
.backEnd-content {
  height: 30px;
  overflow: hidden;
  .user {
    background-color: #ccd8f5;
    width: 30px;
    height: 30px;
    border-radius: 24%;
    vertical-align: middle;
  }
}
/* 下拉菜单样式 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 15px;
}
.el-dropdown__popper .el-dropdown-menu {
  text-align: center;
  width: 80px;
}
.el-dropdown-menu--mini .el-dropdown-menu__item {
  line-height: 30px;
}
</style>
